<template>
  <div>
    <el-row>
      <div class="div-breadcrumb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '' }">&#12288;&#12288;主页</el-breadcrumb-item>
          <el-breadcrumb-item>权限管理</el-breadcrumb-item>
          <el-breadcrumb-item>权限编辑</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </el-row>
    <el-row>
      <el-card class="box-card">
        <div
          slot="header"
          class="clearfix"
        >
          <i class="kfb-icon-list-outline"></i>
          <span>权限列表</span>
          <el-button
            style="float: right; padding: 3px 0"
            type="text"
            @click="handleAdd"
            icon="el-icon-circle-plus-outline"
          >权限添加
          </el-button>
        </div>
        <div class="block">
          <el-table
            :data="this.tableData.filter(data=>data.name.toLowerCase().includes(search.toLowerCase())).slice((currentPage-1)*pageSize,currentPage*pageSize)"
            style="width: 100%"
            ref="utable"
          >
            <el-table-column
              label="权限名称"
              prop="name"
              show-overflow-tooltip
            >
            </el-table-column>

            <el-table-column
              label="权限标识"
              prop="flag"
              show-overflow-tooltip
            >
            </el-table-column>

            <el-table-column
              label="权限描述"
              prop="description"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              label="创建时间"
              prop="ct"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column align="right" width="200px" label="操作">
              <template slot="header" slot-scope="scope">
                <el-input
                  v-model="search"
                  size="mini"
                  placeholder="输入关键字搜索"
                ></el-input>
              </template>
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)"
                >编辑
                </el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                >删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            class="pagination"
            background
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
            :current-page="currentPage"
            :page-sizes="[10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-card>
    </el-row>
    <!--编辑-->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="30%"
      :close-on-click-modal="false"
      :before-close="handleClose"
    >
      <div>
        <el-form
          ref="form"
          :model="form"
          label-width="120px"
          label-position="right"
          :rules="rules"
        >
          <el-form-item label="权限名称" size="small" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="权限标识" size="small" prop="flag">
            <el-input v-model="form.flag"></el-input>
          </el-form-item>
          <el-form-item label="权限描述" size="small" prop="description">
            <el-input v-model="form.description"></el-input>
          </el-form-item>

        </el-form>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible= false" size="small">取 消</el-button>
        <el-button
          type="primary"
          @click="handleConfirm('form')"
          size="small"
        >确 定</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>

  import {add, remove, update, list} from '@/api/yxwh/qxgl';
  import Clone from '@/utils/clone'; //克隆类
  export default {
    name: "index",
    data() {
      return {
        tableData: [],
        form: {},
        rules: {
          name: [{required: true, message: "请输入名称", trigger: "blur"}],
          flag: [{required: true, message: "请选择类型", trigger: "change"}]

        },
        search: "",
        dialogVisible: false,
        add: undefined,
        index: -1,
        total: 0,
        currentPage: 1,
        pageSize: 10,

      };
    },
    computed: {
      title() {
        return this.add ? '添加' : '修改';
      }

    },
    methods: {
      /**
       * 编辑
       * @param index
       * @param row
       */
      handleEdit(index, row) {
        this.index = this.pageSize * (this.currentPage - 1) + index;
        this.form = Clone.clone(row);
        this.dialogVisible = true;
        this.add = false;
      },


      /**
       * 删除
       * @param index
       * @param row
       */
      handleDelete(index, row) {
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          remove(row).then(res => {
            this.tableData.splice(this.pageSize * (this.currentPage - 1) + index, 1);
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      },
      /**
       * 关闭
       * @param done
       */
      handleClose(done) {
        done();
      },

      /**
       * 确定
       * @param formName
       */
      handleConfirm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            if (this.add) {
              add(this.form).then(res => {
                this.tableData.push(res.data);
                this.total = this.tableData.length;
                this.dialogVisible = false;
              });
            } else {
              update(this.form).then(res => {
                Clone.copy(this.form, this.tableData[this.index]);
                this.dialogVisible = false;
              });
            }
          } else {
            this.$message.error("数据校验未通过，请重新输入")
            return false;
          }

        });
      },
      /**
       * 添加
       */
      handleAdd() {
        this.dialogVisible = true;
        this.add = true;
        this.form = {
          name: '',                           //图层名称
          flag: '',                           //图层类型
          description: '',                            //url图层服务地址
          dept: this.$store.getters.dept,                        //最大级别
        };
        if (this.$refs.form) {
          this.$refs.form.resetFields();
        }
      },
      /**
       * 选择页数
       * @param size
       */
      handleSizeChange(size) {
        this.pageSize = size;
      },
      /**
       * 翻页
       * @param currentPage
       */
      handlePageChange(currentPage) {
        this.currentPage = currentPage;
      },
      /**
       * 获取页数
       */
      getData() {
        list().then(res => {
          this.tableData = res.data;
          this.total = this.tableData.length;
        });
      }
    },
    mounted: function () {
      this.getData();
    }
  }
</script>

<style lang="scss" scoped>
  .div-breadcrumb {
    border-radius: 4px;
    min-height: 48px;
    background: #99a9bf;
    display: flex;
    align-items: center;
    font-size: 24px;
  }

  .el-row {
    margin-bottom: 20px;
  }

  .el-row:last-child {
    margin-bottom: 10px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }

  .el-dialog__body {
    padding: 0 0;
  }
</style>

